<template>
  <afl-loading v-if="!data.ready" :width="50" :height="50" class="afl-loading" :tip-style="{fontSize:'16px'}">
    Loading...
  </afl-loading>
  <fullScreenContainer v-else>
    <el-container class="first-container">
      <el-header class="header">
        <title-header :data="data.titleDate" :text2="data.text2" :text1="$t('wms.dailyOutput')"></title-header>
      </el-header>
      <el-container class="second-container">
        <daily-table @getChildren="oncFun"></daily-table>
      </el-container>
    </el-container>
  </fullScreenContainer>
</template>

<script setup>
import aflLoading from '@/components/loading'
import fullScreenContainer from '@/components/fullScreenContainer'
import iconFont from '@/components/IconFont/iconFont'
import { provide, reactive, ref, onMounted, defineEmits, watch } from 'vue'
import ScaleBox from 'vue3-scale-box'
import useI18n from '@/hooks/language'
import config from '@/config'
import titleHeader from '@/components/wms/dailyOutputCheck/titleHeader.vue'
import dailyTable from '@/components/wms/dailyOutputCheck/dailyTable.vue'
import { getProductDataByDay } from '@/api/mesApi'

const { t } = useI18n()

const data = reactive({
  ready: false,
  titleDate: [
    {
      name: t('wms.JKJInputQty'),
      field: 'restQty',
      icon: config.ossUrl + '/afl-data-screen/images/icon-all-input.png',
      value: 0,
      titleNames: 'JKJInputQty',
      span: 3
    }, {
      name: t('wms.JKJOutputQty'),
      field: 'restQty',
      icon: config.ossUrl + '/afl-data-screen/images/icon-takeOut.png',
      value: 0,
      titleNames: 'JKJOutputQty',
      span: 3
    }, {
      name: t('wms.PEOutputQty'),
      field: 'restQty',
      icon: config.ossUrl + '/afl-data-screen/images/icon-output.png',
      value: 0,
      titleNames: 'PEOutputQty',
      span: 3
    }, {
      name: t('wms.finishedProductQty'),
      field: 'restQty',
      icon: config.ossUrl + '/afl-data-screen/images/icon-input.png',
      value: 0,
      titleNames: 'DROutputQty',
      span: 3
    }, {
      name: t('wms.varianceQty'),
      field: 'restQty',
      icon: config.ossUrl + '/afl-data-screen/images/icon-sys.png',
      value: 0,
      valueList: '0',
      titleNames: 'JKJOutputDifferenceQty',
      span: 4
    }, {
      name: t('wms.abnormalCause'),
      field: 'restQty',
      icon: config.ossUrl + '/afl-data-screen/images/icon-search.png',
      cause: '',
      titleNames: 'AbnormalCause',
      span: 5
    }],
  refresh: 'all',
  text2: ''
})

onMounted(async () => {
  data.ready = true
  data.text2 = times()
  setTime()
  await titleList()
})

// 定义时间
const times = () => {
  // 获取当前时间
  var current = new Date()
  current.setTime(current.getTime() - (60 * 60 * 1000 * 5))
  var formatted = current.toISOString().replace(/T/, ' ').replace(/\..+/, '')
  console.log(formatted)
  return formatted.substring(0, 10)
}
const oncFun = (x, y) => {
  console.log('父组件函数,接收到子组件的值为:', x, y)
  data.refresh = x
  data.text2 = y
  titleList()
  watch(() => [data.refresh, data.text2], () => {
    // 监听变化执行数据
  })
}
// 头部条线获取数据
const titleList = () => {
  // const time = times()
  getProductDataByDay({
    CurrentDate: data.text2 + ' 00:00:00'
  }).then(res => {
    data.titleDate = [
      {
        name: t('wms.JKJInputQty'),
        field: 'restQty',
        icon: config.ossUrl + '/afl-data-screen/images/icon-all-input.png',
        value: 0,
        titleNames: 'JKJInputQty',
        span: 3
      }, {
        name: t('wms.JKJOutputQty'),
        field: 'restQty',
        icon: config.ossUrl + '/afl-data-screen/images/icon-takeOut.png',
        value: 0,
        titleNames: 'JKJOutputQty',
        span: 3
      }, {
        name: t('wms.PEOutputQty'),
        field: 'restQty',
        icon: config.ossUrl + '/afl-data-screen/images/icon-output.png',
        value: 0,
        titleNames: 'PEOutputQty',
        span: 3
      }, {
        name: t('wms.finishedProductQty'),
        field: 'restQty',
        icon: config.ossUrl + '/afl-data-screen/images/icon-input.png',
        value: 0,
        titleNames: 'DROutputQty',
        span: 4
      }, {
        name: t('wms.varianceQty'),
        field: 'restQty',
        icon: config.ossUrl + '/afl-data-screen/images/icon-sys.png',
        value: 0,
        valueList: '0',
        titleNames: 'JKJOutputDifferenceQty',
        span: 4
      }, {
        name: t('wms.abnormalCause'),
        field: 'restQty',
        icon: config.ossUrl + '/afl-data-screen/images/icon-search.png',
        cause: '',
        titleNames: 'AbnormalCause',
        span: 5
      }]
    if (res.Status === 200) {
      // 全部的时候
      if (data.refresh === 'all') {
        const keys = Object.keys(res.ProductDataByDayofLine1)
        keys.forEach((name, index) => {
          data.titleDate.forEach(item => {
            if (name === item.titleNames && index < 4) {
              item.value = Number(res.ProductDataByDayofLine1[name]) + Number(res.ProductDataByDayofLine2[name])
            }
            if (name === item.titleNames && item.titleNames === 'JKJOutputDifferenceQty') {
              const a = Number(res.ProductDataByDayofLine1[name]) + Number(res.ProductDataByDayofLine2[name])
              const b = Number(res.ProductDataByDayofLine1.PEOutputDifferenceQty) + Number(res.ProductDataByDayofLine2.PEOutputDifferenceQty)
              const c = Number(res.ProductDataByDayofLine1.DROutputDifferenceQty) + Number(res.ProductDataByDayofLine2.DROutputDifferenceQty)
              item.valueList = 'JKJ：' + a + ',  PE：' + b + ',  DR：' + c
            }
            if (name === item.titleNames && item.titleNames === 'AbnormalCause') {
              item.cause = res.ProductDataByDayofLine1[name] + res.ProductDataByDayofLine2[name]
            }
          })
        })
      } else if (data.refresh === 'first') {
        const keys = Object.keys(res.ProductDataByDayofLine1)
        keys.forEach((name, index) => {
          data.titleDate.forEach(item => {
            if (name === item.titleNames && index < 4) {
              item.value = Number(res.ProductDataByDayofLine1[name])
            }
            if (name === item.titleNames && item.titleNames === 'JKJOutputDifferenceQty') {
              const a = Number(res.ProductDataByDayofLine1[name])
              const b = Number(res.ProductDataByDayofLine1.PEOutputDifferenceQty)
              const c = Number(res.ProductDataByDayofLine1.DROutputDifferenceQty)
              // console.log(a, b, c)
              item.valueList = 'JKJ：' + a + ',  PE：' + b + ',  DR：' + c
            }
            if (name === item.titleNames && item.titleNames === 'AbnormalCause') {
              item.cause = res.ProductDataByDayofLine1[name]
            }
          })
        })
      } else {
        const keys = Object.keys(res.ProductDataByDayofLine2)
        keys.forEach((name, index) => {
          data.titleDate.forEach(item => {
            if (name === item.titleNames && index < 4) {
              item.value = Number(res.ProductDataByDayofLine2[name])
            }
            if (name === item.titleNames && item.titleNames === 'JKJOutputDifferenceQty') {
              const a = Number(res.ProductDataByDayofLine2[name])
              const b = Number(res.ProductDataByDayofLine2.PEOutputDifferenceQty)
              const c = Number(res.ProductDataByDayofLine2.DROutputDifferenceQty)
              // console.log(a, b, c)
              item.valueList = 'JKJ：' + a + ',  PE：' + b + ',  DR：' + c
            }
            if (name === item.titleNames && item.titleNames === 'AbnormalCause') {
              item.cause = res.ProductDataByDayofLine2[name]
            }
          })
        })
      }
    }
  })
}
// 定时执行刷新
const setTime = () => {
  setInterval(async () => {
    titleList()
  }, 6000)
}
</script>

<style scoped lang="scss">
@forward "index";

#app,
#dv-full-screen-container {
  background-color: #EDF2F9
}

* {
  margin: 0;
  padding: 0;
}
</style>
